<template>
  <el-dialog
    title="新增排班"
    :visible.sync="show"
    custom-class="addRoster"
    center
    top="243px"
  >
    <div class="middleContent">
      <div class="rowone">
        <div class="rowoneLeft">
          <span>值班队伍名称：</span>
          <el-input size="small" v-model="teamName" class="nameInput">
          </el-input>
        </div>
        <div class="rowoneRight">
          <span>所属部门：</span>
          <el-select v-model="department" size="small" class="departmentSelect">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="rowtwo">
        <div class="rowoneLeft">
          <span>值班领导：</span>
          <el-input size="small" v-model="teamName" class="nameInput">
          </el-input>
        </div>
        <div class="rowoneRight">
          <span>所属巡区：</span>
          <el-select
            v-model="department"
            placeholder="请选择"
            size="small"
            class="departmentSelect"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="rowthree">
        <div class="rowoneLeft">
          <span>选择日期：</span>
          <el-date-picker
            v-model="data"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="nameInput"
            size="small"
          >
          </el-date-picker>
        </div>
        <div class="rowoneRight">
          <span>人员配置：</span>
          <el-select
            v-model="department"
            placeholder="请选择"
            size="small"
            class="departmentSelect"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="rowfour">
        <div class="rowoneLeft">
          <span>选择时段：</span>
          <el-time-picker
            is-range
            v-model="time"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="nameInput"
            size="small"
          >
          </el-time-picker>
        </div>
      </div>
      <div class="rowsix">
        <div class="rowoneLeft">
          <span>备注：</span>
          <el-input
            type="textarea"
            :rows="2"
            v-model="textarea"
            class="textarea"
          >
          </el-input>
        </div>
      </div>
    </div>
    <div class="disableOrEnableButton" slot="footer">
      <button class="disable" @click="openselectPersonnel">保 存</button>
      <button class="cancel">取 消</button>
    </div>
    <selectPersonnel ref="selectPersonnel"></selectPersonnel>
  </el-dialog>
</template>

<script>
import selectPersonnel from './selectPersonnel'
export default {
  components:{
    selectPersonnel
  },
  methods: {
    openselectPersonnel(){
      this.$refs.selectPersonnel.show=true
    }
  },
  data() {
    return {
      show: false,
      teamName: "",
      department: "",
      data: "",
      time: "",
      textarea:'',
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
};
</script>

<style lang='scss'>
@import '../../assets/sass/roster/addRoster.scss';
</style>